<template>
    <div id="backcont">
        <div class="meituan-content">
            <div class="login-cont">
                <div class="meituan-title">中医文化主题登录系统</div>
                <div class="meituan-user">
                    <p>账号</p>
                    <el-input clearable v-model="account" class="inptflex" placeholder="请输入账号" />
                </div>
                <div class="meituan-user">
                    <p>密码</p>
                    <el-input v-model="password" show-password class="inptflex" placeholder="请输入密码" />
                </div>                
                <el-button v-if="regi == '注册'" @click="signin" type="success" :loading="load" class="meituan-btn">登录</el-button>
                <el-button v-else type="success" @click="register" :loading="load" class="meituan-btn">注册</el-button>
                <div class="link-container">
                    <div class="reg-view" @click="regi = regi == '登录'? '注册' : '登录'"><p>{{regi}}</p></div>
                    <div class="reg-view-two" @click="goToForgotPassword"><p>忘记密码</p></div>
                    <div class="reg-view-three" @click="goToForgotProblem"><p>遇到的问题</p></div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import {reactive,toRefs,getCurrentInstance} from 'vue'
import {useRouter} from 'vue-router'
export default{
    setup(){
        const {proxy} = getCurrentInstance()
        const router = useRouter()
        const user = reactive({
            account:'',
            password:'',
            regi:'注册',
            load:false
        })
        // 登录
        const signin = () => {
            user.load = true
            const storedUsers = JSON.parse(localStorage.getItem('users')) || {}
            const storedPassword = storedUsers[user.account]
            if (storedPassword && storedPassword === user.password) {
                // 跳转到内容页面
                let ids = '1'
                localStorage.setItem('token', 'local_token')
                localStorage.setItem('menuid', JSON.stringify(ids))
                router.push({name:'index'})
            } else {
                new proxy.$tips('账号或密码错误', 'warning').mess_age()
            }
            user.load = false
        }
        // 注册
        const register = () => {
            user.load = true
            const storedUsers = JSON.parse(localStorage.getItem('users')) || {}
            if (storedUsers[user.account]) {
                new proxy.$tips('该账号已存在', 'warning').mess_age()
            } else {
                storedUsers[user.account] = user.password
                localStorage.setItem('users', JSON.stringify(storedUsers))
                user.regi = '注册'
                new proxy.$tips('注册成功', 'success').mess_age()
            }
            user.load = false
        }
        // 跳转到忘记密码页面
        const goToForgotPassword = () => {
            router.push({name:'forgotPassword'})
        }
        // 跳转到遇到的问题页面
        const goToForgotProblem = () => {
            router.push({name:'problem'})
        }
        return{...toRefs(user),signin,register,goToForgotPassword,goToForgotProblem}
    }
}
</script>

<style scoped>
.meituan-btn{
    margin-top: 50px;
}
</style>    